.info-banner {
  display: flex;
  justify-content: space-between;
  padding: $pad-medium;
  gap: $pad-large; // Between text and CTA
  font-size: $x-small;
  font-weight: $regular;
  color: $core-fleet-black;
  line-height: $line-height;

  &__page-banner {
    padding: $pad-large $pad-xlarge;
    width: auto;
    gap: $pad-small;
  }

  &__info {
    // Do not use display flex as it will have adverse effects on spacing around HTML tags
    align-content: center;
    p {
      margin: $pad-small 0 0 0; // TOFIX: this causes weird top margin noticed in #28110
    }
  }

  &__cta {
    display: flex;
    align-items: center;
    color: $core-fleet-black;
    text-align: right;
    gap: $pad-small;
    min-width: max-content;
    margin-left: $pad-small;

    button {
      margin-left: $pad-small;
    }
  }

  &__close {
    margin: -$pad-medium; // Offset clickable padding from making banner taller
  }
}
